<template>
  <div>
    <van-nav-bar title="设置" @click-left="back">
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>
    <div class="kuaiyi">
      <van-cell
        @click="information"
        center
        is-link
        label="头像、昵称、收货地址"
      >
        <template #title>
          <span class="custom-title">个人信息</span>
        </template>
      </van-cell>
      <van-cell
        @click="security"
        center
        is-link
        label="修改密码、修改手机号码、账号绑定管理"
      >
        <template #title>
          <span class="custom-title">账号与安全</span>
        </template>
      </van-cell>
    </div>
    <van-button type="default" @click="Logout" size="large"
      >退出登录</van-button
    >
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  name: "setting",
  data() {
    return {};
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    information() {
      this.$router.push("/information");
    },
    Logout() {
      Dialog.confirm({
        title: "退出登录",
        message: "退出登录后无法查看订单信息",
      })
        .then(() => {
          Toast("退出登录");
          localStorage.removeItem("waimai");
          this.$router.push("/user");
        })
        .catch(() => {
          // on cancel
        });
    },
    security() {
      console.log("安全");
      this.$router.push("/security");
    },
  },
  mounted() {},
};
</script>

<style scoped>
.van-icon {
  color: black;
}

.kuaiyi {
  margin-top: 10px;
}

.van-button {
  position: fixed;
  bottom: 30px;
  width: 90%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 3px;
  background-color: rgb(218, 218, 9);
}
</style>